<template>
    <div style="width:100%;height:100%;" id="service_request_con"></div>
</template>

<script>
import echarts from 'echarts';
import Util from '../../../libs/util';
export default {
    name: 'serviceRequests',
    props:['chartData'],
    data () {
        return {
            chartData1: {
                chart_date_list: [],
                chart_coin_list: [],
                chart_sapling_list: [],
                chart_point_list: []
            }
        };
    },
    mounted () {
        const serviceRequestCharts = echarts.init(document.getElementById('service_request_con'));

        Util.ajax.post(`/adminapi/index/chart`, {}).then(response => {

            this.chartData1 = response.data.data;

            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '3%',
                    left: '1.2%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.chartData1.chart_date_list
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '构树链',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        areaStyle: {normal: {
                                // color: '#2d8cf0'
                            }},
                        data: this.chartData1.chart_coin_list
                    },
                    {
                        name: '构树苗',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        areaStyle: {normal: {
                                // color: '#10A6FF'
                            }},
                        data: this.chartData1.chart_sapling_list
                    },
                    {
                        name: '积分',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        areaStyle: {normal: {
                                // color: '#0C17A6'
                            }},
                        data: this.chartData1.chart_point_list
                    }
                ]
            };

            serviceRequestCharts.setOption(option);

            window.addEventListener('resize', function () {
                serviceRequestCharts.resize();
            });
        });
    },
    methods: {}
};
</script>
